<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="../js/axios.js"></script>
    <script>
        // axios是一个基于Promise用于浏览器和node.js的HTTP客户端
        // 支持浏览器和nodejs
        // 支持promise
        // 能拦截请求和响应
        // 自动转换JSON数据

        // 1.基本使用
        axios.get('http://localhost:3000/data').then(function(ret) {
            // data属性是固定用法,用于获取后台实际数据
            console.log(ret.data);
        })

        // 2.GET请求
        // GET请求
        // 直接传参
        axios.get('http://localhost:3000/data?id=123').then(function(ret) {
            console.log(ret.data);
        });
        // restful形式传参
        axios.get('http://localhost:3000/data/123').then(function(ret) {
            console.log(ret.data);
        });
        // params形式传参
        axios.get('http://localhost:3000/data', {
            params: {
                id: 234
            }
        }).then(function(ret) {
            console.log(ret.data);
        });

        // 3.DELETE传参
        // 直接传参
        axios.delete('http://localhost:3000/data?id=123').then(function(ret) {
            console.log(ret.data);
        });
        // restful形式传参
        axios.delete('http://localhost:3000/data/123').then(function(ret) {
            console.log(ret.data);
        });
        // params形式传参
        axios.delete('http://localhost:3000/data', {
            params: {
                id: 234
            }
        }).then(function(ret) {
            console.log(ret.data);
        });

        // 4.POST传参
        // JSON形式传参
        axios.post('http://localhost:3000/data', {
            uname: 'lisi',
            pwd: 123,
        }).then(function(ret) {
            console.log(ret.data);
        });
        // 表单格式传参
        var params = new URLSearchParams();
        params.append('uname', 'zhangsan');
        params.append('pwd', '111');
        axios.post('http://localhost:3000/data', params).then(function(ret) {
            console.log(ret.data);
        });

        // 4.PUT传参
        axios.put('http://localhost:3000/data', {
            uname: 'lisi',
            pwd: 123,
        }).then(function(ret) {
            console.log(ret.data);
        });
        // 表单格式传参
        var params = new URLSearchParams();
        params.append('uname', 'zhangsan');
        params.append('pwd', '111');
        axios.put('http://localhost:3000/data', params).then(function(ret) {
            console.log(ret.data);
        });
        // 6.axios的响应结果
        // data实际响应回来的数据
        // headers响应头信息
        // status响应状态码
        // statusText响应状态信息
        axios.post('http://localhost:3000/data').then(function(ret) {
            console.log(ret);
            console.log(ret.data);
            console.log(ret.status);
            // ret.data可以直接当作对象使用
        })

        // 7.全局配置
        // 超时时间
        axios.defaults.timeout = 3000;
        // 默认地址
        axios.defaults.baseURL = 'http://localhost:3000/';
        // 设置请求头
        axios.defaults.headers['mytoken'] = '12sadwfafsafas';

        // 8.拦截器
        // 请求拦截器:在发出请求之前设置一些信息
        axios.interceptors.request.use(function(config) {
            console.log(config);
            config.headers.mytoken = 'nihao';
            return config
        }, function(err) {
            console.log(err);
        })
        axios.get('http://localhost:3000/data').then(function(ret) {
                console.log(ret.data);
            })
            // 响应拦截器:在获取数据之前对数据进行一些加工和处理
        axios.interceptors.response.use(function(ret) {
            console.log(ret);
            return ret
        }, function(err) {
            console.log(err);
        })
        axios.get('http://localhost:3000/data').then(function(ret) {
            console.log(ret.data);
        })
    </script>
</body>

</html>